<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-card">
      <view class="user-info">
        <text class="user-name" v-show="roleName!=''" >{{roleName}}</text>
        <text class="welcome">欢迎回来！</text>
        <text class="user-register"  v-show="roleName==''" @click="goToReg()">马上注册，使用更多功能</text>
      </view>
      <image 
        class="avatar" 
        src="/static/images/avatar.png" 
        mode="aspectFill"
      />
    </view>

    <!-- 功能菜单 -->
    <view class="menu-group">
      <view class="menu-item" v-for="(item, index) in menu1" :key="index" @click="goToDetail(item.id)">
        <text class="menu-text">{{ item.title }}</text>
        <image class="arrow" :src="item.icon" />
      </view>
    </view>
    
    <view class="divider"></view>

    <view class="menu-group">
      <view class="menu-item" v-for="item in menu2" :key="item" @click="goToDetail(item.id)">
        <text class="menu-text">{{ item.title }}</text>
        <image class="arrow" :src="item.icon" />
      </view>
    </view>
  </view>
</template>

// 修正数据格式和图标引用
<script>
  import { getMemberInfo } from '@/api/member'
export default {
  data() {
    return {
      roleInfo: {},
      roleName:'',
      menu1: [
        { title: '合作意向', icon: '/static/images/arrow_right.png', id: 1 },
        { title: '我的收藏', icon: '/static/images/arrow_right.png', id: 2 },
        { title: '历史浏览', icon: '/static/images/arrow_right.png', id: 3 }
      ],
      menu2: [
        { title: '关于我们', icon: '/static/images/arrow_right.png', id: 4 }
      ]
    }
  },
  async created() {
    
    try {

      const res = await getMemberInfo()
      if(res){
        this.roleInfo = res;
        if (!('phone' in res)) {
          // console.log('没有填写过手机号')
          this.roleName = ''
        }else{
          this.roleName = res.username;
        }
      }
    } catch (error) {
      console.error('获取收藏列表失败', error)
    }
  },
  methods: {
    goToDetail(id) {
      // 根据菜单项的ID进行跳转逻辑处理，例如：
      switch (id) {
        case 1:
          uni.navigateTo({
            url: `/pages/contact/index`
          })
          break;
        case 2:
          uni.navigateTo({
            url: `/pages/collection/index`
          })
          break;
        case 3:
          uni.navigateTo({
            url: `/pages/history/index`
          })
          break;
        case 4:
          this.showModal()
          break;
        default:
          break;
      }
    },
    goToReg() {
      // 根据菜单项的ID进行跳转逻辑处理，例如：
        uni.navigateTo({
          url: `/pages/mine/register`
        })
    },
    showModal(){
      uni.showModal({
        title: '关于我们',
        content: '这是一个关于我们的模态框',
        showCancel: false,
        success: (res) => {
        }
      });
    }
  }
}
</script>

<!-- // 修正模板结构 -->
<!-- <view class="menu-item" v-for="(item, index) in menu1" :key="index">
  <image class="icon" :src="item.icon" mode="aspectFit" />
  <text>{{ item.title }}</text>
  <image class="arrow" src="/static/icons/arrow-right.png" />
</view> -->

<style>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  margin-bottom: 10px;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}
.user-register {
  font-size: 12px;
  color: rgb(43, 145, 177);
  margin-bottom: 5px;
}

.welcome {
  font-size: 18px;
  color: #666;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: 15px;
}

.menu-group {
  background: #fff;
  padding: 0 15px;
  margin: 0 20px 10px;
  border-radius: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 新增 */
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.menu-text {
  flex: 1; /* 确保文字部分占满剩余空间 */
}

/* 原有箭头样式保持不变 */
.arrow {
  width: 16px;
  height: 16px;
  margin-left: 10px; /* 新增间距 */
}

/* 新增图标样式 */
.menu-item image:first-child {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.arrow {
  width: 16px;
  height: 16px;
  filter: invert(40%) sepia(90%) saturate(2595%) hue-rotate(202deg) brightness(97%) contrast(93%); /* 转为蓝色 */
}

.menu-item:last-child {
  border-bottom: none;
}

.arrow {
  width: 16px;
  height: 16px;
}

.divider {
  height: 10px;
  background: #f5f5f5;
}
</style>
